<!DOCTYPE html>
<html lang="en"  xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>login</title>
    <style>
        body {
            margin-top: 20px;
            margin: 0 auto;
        }
        .carousel-inner .item img {
            width: 100%;
            height: 300px;
        }

        .container .row div {
            /* position:relative;
            float:left; */
        }
        font {
            color: #666;
            font-size: 22px;
            font-weight: normal;
            padding-right: 17px;
        }
    </style>
</head>
<body>
<div class="container" style="width:100%;height:460px;">
    <div class="row">
        <div class="col-md-5">
            <div style="width:440px;border:1px solid #E7E7E7;padding:20px 0 20px 30px;border-radius:5px;margin-top:60px;background:#fff;">
                <!--点击提交之后将注册的操作发送到/do-register/register-->
                <!--http://localhost:9090/springboot-curd-demo/do-register/register-->
                <form id="loginForm" class="form-horizontal" action="/do-register/register" method="post">

                    <div class="form-group">
                        <label for="username" class="col-sm-2 control-label">用户名</label>
                        <div class="col-sm-6">
                            <!--表单要加上name属性，否则服务器得到不值-->
                            <input type="text" class="form-control" name="username" id="username" placeholder="请输入用户名">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="password" class="col-sm-2 control-label">密码</label>
                        <div class="col-sm-6">
                            <input type="password" class="form-control" name="password" id="password"
                                   placeholder="请输入密码">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="verCode" class="col-sm-2 control-label">验证码</label>
                        <div class="col-sm-3">
                            <input type="text" class="form-control" name="verCode" id="verCode" placeholder="请输入验证码">
                        </div>
                        <div class="col-sm-3">

                            <!--
                                springboot默认是采用thmyleaf模板引擎来解析页面的，
                                所以这里如果需要将CheckCodeServlet显到页面中需要
                                通过thmyleaf标签引入，否则无法解析
                            -->
                            <img th:src="@{/CheckCodeServlet}" style="width: 90px; height: 30px; cursor: pointer;"
                                 th:onclick="changeImage(this)"
                                 title="看不清，点击刷新">
                        </div>
                    </div>
<!--                    <div class="form-group">-->
<!--                        <div class="col-sm-offset-2 col-sm-10">-->
<!--                            <div class="checkbox">-->
<!--                                <label>-->
<!--                                    <input name="remember" type="checkbox"> 自动登录-->
<!--                                </label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-->
<!--                            </div>-->
<!--                        </div>-->
<!--                    </div>-->
                    <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-10">
                            <input id="click" type="submit" width="100" value="注册" name="submit" border="0"
                                   style="  eight:35px;width:100px;">
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
</body>
<script type="text/javascript" th:inline="javascript">
        function changeImage(img) {
        	//给对应的servlet发送请求，并添加输入值
        	//如果不添加输入值，会让服务器认为你在重复请求
        	//认为你请求的时间太短了，不需要响应，进而使用本地数据缓存
        	//导致验证码点击切换失败
        	// 注意路径的写法：/不能省略
        	// 异步刷新，不会将输入框中的其他内容刷新掉，只会改变验证码本身
            img.src = "/CheckCodeServlet?t=" + Math.random();
        }
</script>

</html>
